<template>
  <div class="shenheliebiao">
    <div class="main">
      <div class="picture">
        <div class="pic_top">待审核列表</div>
        <!-- 朋友圈内容 -->
        <div class="pic_bottom">
          <div v-for="(item, index) in list" :key="index">
            <div class="title">
              <div class="title_left">
                <div class="img">
                  <img src="@/img/touxiang.webp" alt="" />
                </div>
                <div class="wenzi">
                  <p>{{ item.name }}</p>
                  <span>{{ item.initTime }}</span>
                </div>
              </div>
              <div class="title_right">
                <div class="bohui" @click="onSubmitB(item.id)">驳回</div>
                <div class="tongyi" @click="onSubmitT(item.id)">同意</div>
              </div>
            </div>
            <div class="content">
              <p>{{ item.detail }}</p>
              <div class="tu">
                <div
                  class="fengjing"
                  v-for="(items, indexs) in list[index].photoList"
                  :key="indexs"
                >
                  <img :src="items.img" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";
import server from "@/api";
import { ref, onMounted } from "vue";

var list = ref();
var photosId = ref();

// 审核列表获取相册数据
onMounted(async () => {
  var res = await server.jiaxiaohutong.getPhotosByPage();
  // console.log(res.data.data.date);
  list.value = res.data.data.date;
  // console.log(list.value);

  list.value.forEach((item, index) => {
    for (var key in item.photoList) {
      item.photoList[key].img =
        "http://djq5hg.natappfree.cc" + item.photoList[key].img;
      // console.log(item.photoList[key].img);
    }
  });
});

// 驳回发布消息
var onSubmitB = async (id) => {
  var res = await server.jiaxiaohutong.deletePhotos(id);
  // console.log(res.data.code);
  if (res.data.code == 200) {
    ElNotification.closeAll();
    ElNotification.error({ message: "审核驳回，发布失败！" });
    var i = list.value.findIndex((item) => item.photosId == photosId);
    if (i != -1) {
      list.value.splice(i, 1);
    }
  }
};
// 同意发布消息
var onSubmitT = async (id) => {
  var res = await server.jiaxiaohutong.agreePhotos(id);
  // console.log(res.data.code);
  if (res.data.code == 200) {
    ElNotification.closeAll();
    ElNotification.success({ message: "审核同意，发布成功！" });
  }
};
</script>

<style scoped>
.shenheliebiao {
  height: 100%;
}
.main {
  height: 100%;
  background: rgb(245, 247, 250);
  padding: 10px;
}
.picture {
  background: white;
  padding: 20px;
}
.picture .pic_top {
  height: 50px;
  line-height: 50px;
}
.picture .pic_bottom {
  flex: 1;
  border: 1px solid #ccc;
}
.title {
  height: 60px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.title_left {
  height: 50px;
  width: 160px;
  display: flex;
  justify-content: space-between;
}
.title_left .img {
  width: 50px;
}
.title_left .img img {
  width: 100%;
  border-radius: 50%;
  background: pink;
}
.title_left .wenzi {
  width: 100px;
  /* background: pink; */
  font-size: 12px;
  padding-top: 10px;
  line-height: 20px;
}
.title_right {
  height: 30px;
  width: 200px;
  /* background: greenyellow; */
  display: flex;
  justify-content: space-between;
}
.title_right .bohui,
.title_right .tongyi {
  width: 80px;
  border: 1px solid red;
  color: red;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
.title_right .tongyi {
  border: 1px solid blue;
  color: blue;
}
.content {
  /* background: pink; */
  margin-left: 60px;
  width: 500px;
  margin-bottom: 50px;
}
.content p {
  margin-bottom: 15px;
  font-size: 12px;
}
.tu {
  display: flex;
  justify-content: space-start;
  flex-wrap: wrap;
  width: 800px;
  height: 500px;
  /* background: gray; */
}
.fengjing {
  width: 31%;
  height: 200px;
  padding: 20px;
  /* background: yellowgreen; */
}
.fengjing img {
  width: 100%;
  height: 200px;
}
.fengjing img:hover {
  transform: scale(1.1);
}
</style>